<template>
  <div class="to-list">
    <Scroll class="top-list-wrapper">
      <ul>
        <li class="item" v-for="item in topList" :key="item.id" @click="selectItem(item)">
          <div class="icon">
            <img v-lazy="item.pic" width="100" height="100" />
          </div>
          <!-- 歌单对应歌曲 -->
          <ul class="song-list">
            <li
              class="song"
              v-for="(song, index) in item.songList"
              :key="song.id"
            >
              <span>{{ index + 1 }}.</span>
              <span>{{ song.songName }} - {{ song.singerName }}</span>
            </li>
          </ul>
        </li>
      </ul>
    </Scroll>
    <router-view #default="{ Component }">
      <transition name="slide">
        <component :is="Component"></component>
      </transition>
    </router-view>
  </div>
</template>

<script>
import Scroll from '@/components/base/scroll/scroll.vue'
import { getTopList } from '@/service/top-list'
import { TOP_KEY } from '@/assets/js/constant'
export default {
  components: {
    Scroll
  },
  data () {
    return {
      topList: [],
      loading: true
    }
  },
  async created () {
    const result = await getTopList()
    this.topList = result.topList
    this.loading = false
  },
  methods: {
    selectItem (top) {
      this.selectedTop = top
      this.cacheTop(top)
      this.$router.push({ path: `/top-list/${top.id}` })
    },
    cacheTop (top) {
      sessionStorage.setItem(TOP_KEY, JSON.stringify(top))
    }
  }
}
</script>

<style lang="scss" scoped>
.top-list-wrapper {
  height: calc(100vh - 44px - 60px - $tab-bottom-height);
  width: 100%;
  padding: 20px;
  box-sizing: border-box;
  overflow: hidden;
}
.item {
  display: flex;
  margin-top: 20px;
  .song-list {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    padding: 10px 20px;
    background: $color-highlight-background;
    color: $color-text-d;
    font-size: $font-size-small;
  }
}
</style>
